<template>
  <div id="app">
    <el-container style="height: 100vh;">
      <el-header style="background-color: #409EFF; color: white;">
        <div style="display: flex; align-items: center; justify-content: center; height: 100%;">
          <div style="display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1200px;">
            <div style="display: flex; align-items: center;">
              <h1 style="margin: 0; font-size: 24px; cursor: pointer;" @click="$router.push('/')">
                <el-icon><Tools /></el-icon>
                在线工具集
              </h1>
            </div>
            <el-menu 
              mode="horizontal" 
              :default-active="$route.path.startsWith('/encrypt') ? '/encrypt' : $route.path.startsWith('/encode') ? '/encode' : $route.path.startsWith('/format') ? '/format' : $route.path.startsWith('/other') ? '/other' : '/'"
              background-color="transparent"
              text-color="white"
              active-text-color="#ffd04b"
              router
              style="border: none;"
              :ellipsis="false"
            >
              <el-menu-item index="/" style="padding: 0 20px;">首页</el-menu-item>
              <el-menu-item index="/encrypt" style="padding: 0 20px;">加密解密</el-menu-item>
              <el-menu-item index="/encode" style="padding: 0 20px;">编码转换</el-menu-item>
              <el-menu-item index="/format" style="padding: 0 20px;">代码格式化</el-menu-item>
              <el-menu-item index="/other" style="padding: 0 20px;">其他工具</el-menu-item>
            </el-menu>
          </div>
        </div>
      </el-header>
      <el-main style="padding: 20px;">
        <router-view />
      </el-main>

      <el-footer style="background-color: #f5f5f5; border-top: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: center; height: 50px;">
          <a style="color: #666; font-size: 14px;text-decoration: none;" href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow" class="beian" data-v-f046631b="">Copyright © 深圳市易之信息科技有限公司 备案号：粤ICP备16065590号-5</a>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import { Tools } from '@element-plus/icons-vue'
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

.el-header {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tool-card {
  transition: all 0.3s ease;
  cursor: pointer;
}

.tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 自定义菜单样式 */
.el-menu--horizontal {
  border-bottom: none !important;
}

.el-menu--horizontal > .el-menu-item {
  color: white !important;
  border-bottom: none !important;
  font-size: 14px;
}

.el-menu--horizontal > .el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffd04b !important;
}

.el-menu--horizontal > .el-menu-item.is-active {
  color: #ffd04b !important;
  border-bottom: 2px solid #ffd04b !important;
}
</style> 